<script lang='ts' setup>

import {
  APPLICATION_STATE_INSTALL_FAILURE,
  APPLICATION_STATE_INSTALLED,
  APPLICATION_STATE_INSTALLING,
  APPLICATION_STATE_NAMES,
  APPLICATION_STATE_NOT_INSTALL,
  APPLICATION_STATE_RESTARTING,
  APPLICATION_STATE_RUN_ERROR,
  APPLICATION_STATE_RUNNING,
  APPLICATION_STATE_STARTING,
  APPLICATION_STATE_STOPPED,
  APPLICATION_STATE_STOPPING,
  APPLICATION_STATE_VERSION_NOT_EFFECT,
  ApplicationState
} from '@/apis/application/state.ts'
import { PropType } from 'vue'

const emits = defineEmits(['install', 'start', 'restart', 'stop', 'configuration'])
const props = defineProps({
  loading: {required: true, type: Boolean},
  state: {required: true, type: Object as PropType<ApplicationState>},
  installing: {required: true, type: Boolean},
  starting: {required: true, type: Boolean},
  restarting: {required: true, type: Boolean},
  stopping: {required: true, type: Boolean},
})

async function install(): Promise<void> {
  emits('install')
}

async function start(): Promise<void> {
  emits('start')
}

async function restart(): Promise<void> {
  emits('restart')
}

async function stop(): Promise<void> {
  emits('stop')
}

async function configuration(): Promise<void> {
  emits('configuration')
}
</script>

<template>
  <div class='application-wrap'>
    <n-space vertical>
      <n-space align='center' justify='center'>
        <n-h2><slot name='title'></slot></n-h2>
      </n-space>
      <n-space align='center' justify='center'>
        <n-h6><slot name='description'></slot></n-h6>
      </n-space>
      <template v-if='props.loading'>
        <n-skeleton height='25px' width='100%' />
      </template>
      <template v-else>
        <n-space :wrap-item='false' align='center' justify='space-between'>
          <div class='flex-max'>
            <n-space :wrap-item='false' align='center'>
              <div v-if='APPLICATION_STATE_NOT_INSTALL !== props.state!.state && APPLICATION_STATE_INSTALL_FAILURE != props.state!.state'>{{ 'V' + props.state!.version }}</div>
              <template v-if='APPLICATION_STATE_INSTALLING === props.state!.state || APPLICATION_STATE_INSTALL_FAILURE === props.state!.state'>
                <div>{{ props.state!.stage }}</div>
                <div v-if='("下载安装包" === props.state!.stage || "安装应用" === props.state!.stage) && "" === props.state!.message' class='flex-max'>
                  <n-progress :percentage='props.state!.stage_progress' :show-indicator='false' status='success' type='line' />
                </div>
                <div v-if='"" !== props.state!.message'>{{ props.state!.message }}</div>
              </template>
              <div v-if='APPLICATION_STATE_VERSION_NOT_EFFECT === props.state!.state'>版本无效</div>
              <template v-if='APPLICATION_STATE_NOT_INSTALL !== props.state!.state && APPLICATION_STATE_INSTALLING !== props.state!.state && APPLICATION_STATE_INSTALL_FAILURE !== props.state!.state && APPLICATION_STATE_VERSION_NOT_EFFECT !== props.state!.state'>
                <div>{{ APPLICATION_STATE_NAMES[props.state!.state] }}</div>
              </template>
            </n-space>
          </div>
          <n-space align='center'>
            <n-button v-if='APPLICATION_STATE_NOT_INSTALL === props.state!.state || APPLICATION_STATE_INSTALL_FAILURE === props.state!.state || APPLICATION_STATE_INSTALLING === props.state!.state' :disabled='APPLICATION_STATE_INSTALLING === props.state!.state' :loading='props.installing || APPLICATION_STATE_INSTALLING === props.state!.state' size='small'
                      type='primary' @click='install'>安装应用
            </n-button>
            <n-button v-if='APPLICATION_STATE_INSTALLED === props.state!.state || APPLICATION_STATE_STOPPED === props.state!.state || APPLICATION_STATE_VERSION_NOT_EFFECT === props.state!.state' size='small' type='primary' @click='install'>重新安装</n-button>
            <template v-if='APPLICATION_STATE_NOT_INSTALL !== props.state!.state && APPLICATION_STATE_INSTALL_FAILURE !== props.state!.state && APPLICATION_STATE_VERSION_NOT_EFFECT !== props.state!.state && APPLICATION_STATE_INSTALLING !== props.state!.state'>
              <n-button size='small' type='primary' @click='configuration'>配置管理</n-button>
              <n-button v-if='APPLICATION_STATE_INSTALLED === props.state!.state || APPLICATION_STATE_RUN_ERROR === props.state!.state || APPLICATION_STATE_STOPPED === props.state!.state || APPLICATION_STATE_STARTING === props.state!.state' :disabled='APPLICATION_STATE_STARTING === props.state!.state' :loading='props.starting' size='small' type='primary'
                        @click='start'>启动
              </n-button>
              <template v-if='APPLICATION_STATE_RUNNING === props.state!.state || APPLICATION_STATE_RESTARTING === props.state!.state || APPLICATION_STATE_STOPPING === props.state!.state'>
                <n-button :disabled='APPLICATION_STATE_RESTARTING === props.state!.state || APPLICATION_STATE_STOPPING === props.state!.state' :loading='props.restarting' size='small' type='warning' @click='restart'>重启</n-button>
                <n-button :disabled='APPLICATION_STATE_RESTARTING === props.state!.state || APPLICATION_STATE_STOPPING === props.state!.state' :loading='props.stopping' size='small' type='error' @click='stop'>停止</n-button>
              </template>
            </template>
          </n-space>
        </n-space>
        <div v-if='APPLICATION_STATE_INSTALLING === props.state!.state || APPLICATION_STATE_INSTALL_FAILURE === props.state!.state' class='flex-max'>
          <n-progress :percentage='props.state!.progress' :show-indicator='false' status='success' type='line' />
        </div>
      </template>
    </n-space>
  </div>
</template>

<style scoped>

</style>
